
<template>
  <Modal v-model="isShow" title="用户编辑" @on-cancel="cancel">
    <Form
      :model="formItem"
      ref="formValidate"
      class="from-box"
      :rules="ruleValidate"
      :label-width="80"
    >
      <Form-item label="姓名" prop="name">
        <Input v-model="formItem.name" placeholder="姓名" />
      </Form-item>
      <Form-item label="用户名" prop="userName">
        <Input v-model="formItem.userName" placeholder="用户名" />
      </Form-item>
      <Form-item label="性别" prop="sex">
        <Radio-group v-model="formItem.sex">
          <Radio label="男">男</Radio>
          <Radio label="女">女</Radio>
        </Radio-group>
      </Form-item>
      <Form-item label="部门" prop="departmentID">
        <Select
          v-model="formItem.departmentID"
          placeholder="请选择"
          class="selectbumen"
        >
          <Option v-for="item in Department" :value="item.id" :key="item.id">{{
            item.departmentName
          }}</Option>
        </Select>
      </Form-item>
      <Form-item label="职务" prop="dutyID">
        <Select
          v-model="formItem.dutyID"
          placeholder="请选择"
          class="selectbumen"
        >
          <Option v-for="item in dutyList" :value="item.id" :key="item.id">{{
            item.userDuty
          }}</Option>
        </Select>
      </Form-item>
      <Form-item label="手机号" prop="phon">
        <Input v-model="formItem.phon" placeholder="手机号" />
      </Form-item>
      <Form-item label="安全等级" prop="securityLevel">
        <Radio-group v-model="formItem.securityLevel">
          <Radio label="1">重要</Radio>
          <Radio label="2">高</Radio>
          <Radio label="3">中</Radio>
          <Radio label="4">低</Radio>
        </Radio-group>
      </Form-item>
      <Form-item label="备注" prop="explain">
        <Input
          v-model="formItem.explain"
          type="textarea"
          :autosize="{ minRows: 2, maxRows: 5 }"
          placeholder="备注"
        />
      </Form-item>
      <slot name="footer"></slot>
    </Form>
    <div slot="footer" class="dialog-footer">
      <Button type="primary" @click="confirm">确定</Button>
      <Button @click="cancel">取消</Button>
    </div>
  </Modal>
</template>

<script>
import {
  getDepartment,
  getDuty,
  editUserInfo,
  getUserInfo
} from '@/api/system/user.js'
export default {
  name: 'Detail',
  components: {},
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: '新增用户'
    },
    modelType: {
      type: String,
      default: 'add'
    },
    userId: {
      type: Number,
      default: -1
    }
  },
  data () {
    return {
      isShow: false,
      formItem: {
        name: '',
        userName: '',
        sex: '男',
        departmentID: '',
        dutyID: '',
        phon: '',
        securityLevel: '1',
        explain: ''
      },
      Department: [],
      dutyList: [],
      ruleValidate: {
        name: [{ required: true, message: '姓名不能为空', trigger: 'blur' }],
        userName: [
          { required: true, message: '用户名不能为空', trigger: 'blur' }
        ],
        sex: [{ required: true, message: '性别不能为空', trigger: 'change' }],
        departmentID: [
          {
            required: true,
            message: '请选择部门',
            trigger: 'change',
            type: 'number'
          }
        ],
        dutyID: [
          {
            required: true,
            message: '请选择职务',
            trigger: 'change',
            type: 'number'
          }
        ],
        phon: [
          { required: true, message: '手机号不能为空', trigger: 'blur' },
          {
            pattern: /^1[3456789]\d{9}$/,
            message: '手机号码格式不正确',
            trigger: 'blur'
          }
        ],
        securityLevel: [
          { required: true, message: '安全等级不能为空', trigger: 'change' }
        ]
      }
    }
  },
  created () {},
  watch: {
    userId: {
      // 深度监听，可监听到对象、数组的变化
      handler (val, oldVal) {
        if (this.userId && this.userId !== -1) {
          this.getUserInfo(this.userId)
        }
      },
      deep: true // true 深度监听
    },
    visible: {
      // 深度监听，可监听到对象、数组的变化
      handler (val, oldVal) {
        this.isShow = this.visible
      },
      deep: true // true 深度监听
    }
  },
  mounted () {
    this.getDepartmentList()
    this.getDutyList()
  },
  methods: {
    confirm () {
      let that = this
      // let params = JSON.parse(JSON.stringify(this.formItem))
      let params = {
        id: that.userId,
        taB_Departments_ID: that.formItem.departmentID,
        taB_Dutys_ID: that.formItem.dutyID,
        taB_SecurityLevel_ID: Number(that.formItem.securityLevel),
        userName: that.formItem.name,
        userSex: that.formItem.sex,
        loginName: that.formItem.userName,
        mobilePhon: that.formItem.phon,
        userExplain: that.formItem.explain
      }
      that.$refs['formValidate'].validate((valid) => {
        if (valid) {
          editUserInfo(params).then((res) => {
            if (res.status === 200) {
              that.$Message.success('编辑成功！')
              that.$refs['formValidate'].resetFields()
              that.$emit('closeupdateModel')
            } else {
              that.$Message.warning('请求失败，请联系管理员！')
            }
          })
        } else {
          // this.$Message.error('表单验证失败!');
        }
      })
    },
    cancel () {
      this.$emit('closeupdateModel')
      this.$refs['formValidate'].resetFields()
    },
    cancelModel () {},
    // 获取公司列表
    getDepartmentList () {
      let that = this
      getDepartment().then((res) => {
        if (res.status === 200) {
          that.Department = res.data
        } else {
          that.$Message.warning('请求失败，请联系管理员！')
        }
      })
    },
    // 部门列表
    getDutyList () {
      let that = this
      getDuty().then((res) => {
        if (res.status === 200) {
          that.dutyList = res.data
        } else {
          that.$Message.warning('请求失败，请联系管理员！')
        }
      })
    },
    // 获取用户详情
    getUserInfo (id) {
      let that = this
      getUserInfo(id).then((res) => {
        if (res.status === 200) {
          const items = res.data.user
          console.log(items.securityLevel.id)
          that.formItem.name = items.userName
          that.formItem.userName = items.loginName
          that.formItem.sex = items.userSex
          that.formItem.departmentID = items.department.id
          that.formItem.dutyID = items.duty.id
          that.formItem.phon = items.mobilePhon
          that.formItem.securityLevel = String(items.securityLevel.id)
          that.formItem.explain = items.userExplain
          that.formItem.pwd = items.loginPwd
        } else {
          that.$Message.warning('请求失败，请联系管理员！')
        }
      })
    },
    getLevel (id) {
      if (id === 1) {
        return '重要'
      }
      if (id === 2) {
        return '高'
      }
      if (id === 3) {
        return '中'
      }
      if (id === 4) {
        return '低'
      }
      return ''
    }
  }
}
</script>

<style lang="less" scoped>
.dialog-footer {
  display: flex;
  justify-content: center;
  button:nth-child(1) {
    margin-right: 20px;
  }
}
.from-box {
  /deep/.ivu-select {
    .ivu-select-selected-value {
      color: #000000 !important;
    }
  }
}
</style>
